Reacti useFormState valideerimisahel: mitmeetapilise vormivalideerimise meisterlikkus

Tugeva valideerimisega keerukate vormide loomine on tänapäeva veebiarenduses levinud väljakutse. Reacti useFormState hook pakub võimsat ja paindlikku viisi vormi oleku ja valideerimise haldamiseks, võimaldades luua keerukaid mitmeetapilisi valideerimisahelaid. See põhjalik juhend juhatab teid läbi kogu protsessi, alates põhitõdede mõistmisest kuni täiustatud asünkroonsete valideerimisstrateegiate rakendamiseni.

Miks mitmeetapiline vormivalideerimine?

Traditsiooniline, üheetapiline vormivalideerimine võib muutuda tülikaks ja ebatõhusaks, eriti kui tegemist on paljude väljade või keerukate sõltuvustega vormidega. Mitmeetapiline valideerimine võimaldab teil:

• Parandada kasutajakogemust: Pakkuda kohest tagasisidet konkreetsetele vormi osadele, juhendades kasutajaid tõhusamalt läbi täitmisprotsessi.
• Suurendada jõudlust: Vältida tarbetuid valideerimiskontrolle kogu vormi ulatuses, optimeerides jõudlust, eriti suurte vormide puhul.
• Parandada koodi hooldatavust: Jaotada valideerimisloogika väiksemateks, hallatavateks üksusteks, muutes koodi lihtsamini mõistetavaks, testitavaks ja hooldatavaks.

useFormState mõistmine

useFormState hook (mis on sageli saadaval teekides nagu react-use või kohandatud implementatsioonides) pakub viisi vormi oleku, valideerimisvigade ja esitamise haldamiseks. Selle põhilised funktsioonid hõlmavad:

• Oleku haldamine: Salvestab vormiväljade hetkeväärtused.
• Valideerimine: Käivitab valideerimisreeglid vormi väärtuste suhtes.
• Vigade jälgimine: Hoiab arvet iga väljaga seotud valideerimisvigade kohta.
• Esitamise haldamine: Pakub mehhanisme vormi esitamiseks ja esitamise tulemuse käsitlemiseks.

Põhilise valideerimisahela ehitamine

Alustame lihtsa näitega kaheetapilisest vormist: isikuandmed (nimi, e-post) ja aadressiandmed (tänav, linn, riik).

Samm 1: Määratle vormi olek

Esmalt määratleme oma vormi algoleku, mis hõlmab kõiki välju:

const initialFormState = {
  firstName: '',
  lastName: '',
  email: '',
  street: '',
  city: '',
  country: '',
};

Samm 2: Loo valideerimisreeglid

Järgmisena määratleme oma valideerimisreeglid. Selles näites nõuame, et kõik väljad oleksid täidetud ja et e-posti aadress oleks kehtivas vormingus.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'See väli on kohustuslik.';
  }

  if (fieldName === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    return 'Vigane e-posti vorming.';
  }

  return null; // Viga puudub
};

Samm 3: Rakenda useFormState hook

Nüüd integreerime valideerimisreeglid oma Reacti komponenti, kasutades (hüpoteetilist) useFormState hooki:

import React, { useState } from 'react';

// Eeldades kohandatud implementatsiooni või teeki nagu react-use
const useFormState = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    // Valideeri muutmisel parema kasutajakogemuse jaoks (valikuline)
    setErrors({ ...errors, [name]: validateField(name, value) });
  };

  const validateFormStage = (fields) => {
    const newErrors = {};
    let isValid = true;
    fields.forEach(field => {
      const error = validateField(field, values[field]);
      if (error) {
        newErrors[field] = error;
        isValid = false;
      }
    });
    setErrors({...errors, ...newErrors}); // Ühenda olemasolevate vigadega
    return isValid;
  };

  const clearErrors = (fields) => {
    const newErrors = {...errors};
    fields.forEach(field => delete newErrors[field]);
    setErrors(newErrors);
  };

  return {
    values,
    errors,
    handleChange,
    validateFormStage,
    clearErrors,
  };
};


const MyForm = () => {
  const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
  const [currentStage, setCurrentStage] = useState(1);

  const handleNextStage = () => {
    let isValid;
    if (currentStage === 1) {
        isValid = validateFormStage(['firstName', 'lastName', 'email']);
    } else {
        isValid = validateFormStage(['street', 'city', 'country']);
    }

    if (isValid) {
      setCurrentStage(currentStage + 1);
    }
  };

  const handlePreviousStage = () => {
    if(currentStage > 1){
      if(currentStage === 2){
        clearErrors(['firstName', 'lastName', 'email']);
      } else {
        clearErrors(['street', 'city', 'country']);
      }
      setCurrentStage(currentStage - 1);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
    if (isValid) {
      // Esita vorm
      console.log('Vorm esitatud:', values);
      alert('Vorm esitatud!'); //Asenda tegeliku esitamisloogikaga
    } else {
      console.log('Vormil on vigu, palun parandage need.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Isikuandmed
          
            Eesnimi:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Perekonnanimi:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            E-post:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Aadressiandmed
          
            Tänav:
            
            {errors.street && {errors.street}}
          
          

          
            Linn:
            
            {errors.city && {errors.city}}
          
          

          
            Riik:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Eelmine}
        {currentStage < 2 && Järgmine}
        {currentStage === 2 && Esita}
      
    
  );
};

export default MyForm;

Samm 4: Rakenda etappide navigeerimine

Kasuta olekumuutujaid vormi praeguse etapi haldamiseks ja renderda sobiv vormi osa vastavalt praegusele etapile.

Täiustatud valideerimistehnikad

Asünkroonne valideerimine

Mõnikord nõuab valideerimine serveriga suhtlemist, näiteks kasutajanime saadavuse kontrollimist. See eeldab asünkroonset valideerimist. Siin on, kuidas seda integreerida:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Kasutajanimi on saadaval
    } else {
      return 'Kasutajanimi on juba võetud.';
    }
  } catch (error) {
    console.error('Viga kasutajanime kontrollimisel:', error);
    return 'Viga kasutajanime kontrollimisel. Palun proovige uuesti.'; // Käsitle võrguvigu sujuvalt
  }
};

const useFormStateAsync = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const validateFieldAsync = async (fieldName, value) => {
    if (fieldName === 'username') {
      return await validateUsername(value);
    }
    return validateField(fieldName, value);
  };


  const handleSubmit = async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      let newErrors = {};
      let isValid = true;

      for(const key in values){
        const error = await validateFieldAsync(key, values[key]);
        if(error){
          newErrors[key] = error;
          isValid = false;
        }
      }

      setErrors(newErrors);
      setIsSubmitting(false);

      if (isValid) {
        // Esita vorm
        console.log('Vorm esitatud:', values);
        alert('Vorm esitatud!'); // Asenda tegeliku esitamisloogikaga
      } else {
        console.log('Vormil on vigu, palun parandage need.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting //Valikuline: kuva laadimissõnum valideerimise ajal
  };
};

See näide sisaldab validateUsername funktsiooni, mis teeb API-kõne kasutajanime saadavuse kontrollimiseks. Veenduge, et käsitlete võimalikke võrguvigu ja annate kasutajale asjakohast tagasisidet.

Tingimuslik valideerimine

Mõned väljad võivad nõuda valideerimist ainult teiste väljade väärtuste põhjal. Näiteks võib "Ettevõtte veebisait" väli olla kohustuslik ainult siis, kui kasutaja märgib, et on töösuhtes. Rakendage tingimuslik valideerimine oma valideerimisfunktsioonides:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Ettevõtte veebisait on kohustuslik, kui olete töösuhtes.';
  }
  return validateField(fieldName, value); // Delegeeri põhilisele valideerimisele
};

Dünaamilised valideerimisreeglid

Mõnikord peavad valideerimisreeglid ise olema dünaamilised, tuginedes välistele teguritele või andmetele. Saate seda saavutada, edastades dünaamilised valideerimisreeglid argumentidena oma valideerimisfunktsioonidele:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `See väli peab olema lühem kui ${rules[fieldName].maxLength} tähemärki.`;
  }
  return validateField(fieldName, value); // Delegeeri põhilisele valideerimisele
};

Vigade käsitlemine ja kasutajakogemus

Tõhus vigade käsitlemine on positiivse kasutajakogemuse jaoks ülioluline. Kaaluge järgmist:

• Kuva vead selgelt: Paigutage veateated vastavate sisestusväljade lähedale. Kasutage selget ja lühikest keelt.
• Reaalajas valideerimine: Valideerige välju kasutaja tippimise ajal, pakkudes kohest tagasisidet. Olge teadlik jõudluse mõjudest; vajadusel kasutage valideerimiskõnede jaoks debounce'i või throttle'it.
• Keskendu vigadele: Pärast esitamist suunake kasutaja tähelepanu esimesele veaga väljale.
• Ligipääsetavus: Veenduge, et veateated oleksid ligipääsetavad puuetega kasutajatele, kasutades ARIA atribuute ja semantilist HTML-i.
• Rahvusvahelistamine (i18n): Rakendage korrektne rahvusvahelistamine, et kuvada veateateid kasutaja eelistatud keeles. Abi võivad pakkuda teenused nagu i18next või natiivne JavaScripti Intl API.

Parimad tavad mitmeetapilise vormivalideerimise jaoks

• Hoidke valideerimisreeglid lühikesed: Jaotage keeruline valideerimisloogika väiksemateks, korduvkasutatavateks funktsioonideks.
• Testige põhjalikult: Kirjutage ühiktestid, et tagada oma valideerimisreeglite täpsus ja usaldusväärsus.
• Kasutage valideerimisteeki: Kaaluge spetsiaalse valideerimisteegi (nt Yup, Zod) kasutamist protsessi lihtsustamiseks ja koodi kvaliteedi parandamiseks. Need teegid pakuvad sageli skeemipõhist valideerimist, mis muudab keerukate valideerimisreeglite määratlemise ja haldamise lihtsamaks.
• Optimeerige jõudlust: Vältige tarbetuid valideerimiskontrolle, eriti reaalajas valideerimise ajal. Kasutage memoiseerimistehnikaid valideerimistulemuste vahemällu salvestamiseks.
• Andke selgeid juhiseid: Juhendage kasutajaid vormi täitmisel selgete juhiste ja abistavate vihjetega.
• Kaaluge järkjärgulist avalikustamist: Näidake igas etapis ainult asjakohaseid välju, lihtsustades vormi ja vähendades kognitiivset koormust.

Alternatiivsed teegid ja lähenemisviisid

Kuigi see juhend keskendub kohandatud useFormState hookile, on olemas mitmeid suurepäraseid vormiteeke, mis pakuvad sarnast funktsionaalsust, sageli lisafunktsioonide ja jõudluse optimeerimistega. Mõned populaarsed alternatiivid on:

• Formik: Laialdaselt kasutatav teek vormi oleku ja valideerimise haldamiseks Reactis. See pakub deklaratiivset lähenemist vormi käsitlemisele ja toetab erinevaid valideerimisstrateegiaid.
• React Hook Form: Jõudlusele keskendunud teek, mis kasutab kontrollimatuid komponente ja Reacti ref API-d, et minimeerida uuesti renderdamisi. See pakub suurepärast jõudlust suurte ja keerukate vormide jaoks.
• Final Form: Mitmekülgne teek, mis toetab erinevaid kasutajaliidese raamistikke ja valideerimisteeke. See pakub paindlikku ja laiendatavat API-d vormi käitumise kohandamiseks.

Õige teegi valik sõltub teie konkreetsetest nõuetest ja eelistustest. Otsuse tegemisel arvestage selliste teguritega nagu jõudlus, kasutusmugavus ja funktsioonide komplekt.

Rahvusvahelised kaalutlused

Globaalsele sihtrühmale vormide loomisel on oluline arvestada rahvusvahelistamise ja lokaliseerimisega. Siin on mõned olulised aspektid:

• Kuupäeva ja kellaaja vormingud: Kasutage lokaadipõhiseid kuupäeva ja kellaaja vorminguid, et tagada järjepidevus ja vältida segadust.
• Arvuvormingud: Kasutage lokaadipõhiseid arvuvorminguid, sealhulgas valuutasümboleid ja komakohti.
• Aadressivormingud: Kohandage aadressivälju erinevate riikide vormingutele. Mõned riigid võivad nõuda postiindekseid enne linnu, samas kui teistel ei pruugi postiindekseid üldse olla.
• Telefoninumbri valideerimine: Kasutage telefoninumbri valideerimisteeki, mis toetab rahvusvahelisi telefoninumbri vorminguid.
• Märgikodeering: Veenduge, et teie vorm käsitleb erinevaid märgistikke õigesti, sealhulgas Unicode'i ja teisi mitte-ladina tähti.
• Paremalt-vasakule (RTL) paigutus: Toetage RTL-keeli, nagu araabia ja heebrea, kohandades vormi paigutust vastavalt.

Neid rahvusvahelisi aspekte arvesse võttes saate luua vorme, mis on globaalsele sihtrühmale ligipääsetavad ja kasutajasõbralikud.

Kokkuvõte

Mitmeetapilise vormivalideerimisahela rakendamine Reacti useFormState hooki (või alternatiivsete teekidega) võib oluliselt parandada kasutajakogemust, suurendada jõudlust ja parandada koodi hooldatavust. Mõistes põhimõisteid ja rakendades selles juhendis toodud parimaid tavasid, saate luua tugevaid ja skaleeritavaid vorme, mis vastavad tänapäevaste veebirakenduste nõudmistele.

Pidage meeles, et esmatähtis on kasutajakogemus, testige põhjalikult ja kohandage oma valideerimisstrateegiaid oma projekti spetsiifilistele nõuetele. Hoolika planeerimise ja teostusega saate luua vorme, mis on nii funktsionaalsed kui ka meeldivad kasutada.

Lisalugemist

• Reacti ametlik dokumentatsioon
• Formiki dokumentatsioon
• React Hook Formi dokumentatsioon